<template>
  <div class="xd">
   <van-sticky>
      <!-- <van-empty description="待开发" /> -->
      <van-search
      v-model="value"
      shape="round"
      background="#ffffff"
      placeholder="请输入搜索关键词"
      
      />
   </van-sticky>

    <van-tree-select
      height="600px"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <div v-if="active === 0" class="cs">
            <div v-for="item in csitem" :key="item.id">
               <img :src="item.img" alt="">
               <div>
                  <span>{{item.span}}</span>
                  <p>{{item.p}}</p>
               </div>
            </div>
          
        </div>
        <div v-if="active === 0" class="cs">

        </div>
      </template>
      
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      items: [
        { text: "当季热门" },
        { text: "东北度假" },
        { text: "华东周边" },
        { text: "南方海滨" },
        { text: "网红美食" },
        { text: "美景风光" },
        { text: "西域风情" },
        { text: "东南亚" },
        { text: "大洋洲" },
        { text: "中东非" },
        { text: "大洋洲" },
        { text: "欧洲" },
        { text: "" },
      ],
      csitem:[
         { img: require("../../assets/img/0415c1c9-eb35-4355-b875-a74ee27fee11_202005151056_500_350 (1).jpg") , span: "三亚",p:"SanYa"},
         { img: require("../../assets/img/73ff8d3f-5c23-47db-9aaf-db2b58849a9f_202009021403_500_350.jpg") , span: "南京",p:"NanJing"},
      ],
      value:''
    };
  },
};
</script>

<style lang="scss" scoped>
.van-sidebar-item {
  width: 100px;
  font-size: 14px;
  line-height: 25px;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
}

.van-tree-select__nav {
  flex: 0.7;
}
.van-sidebar-item--select::before {
  background-color: #fff;
}
.van-sidebar-item--select {
  color: #00be88;
}
.van-grid-item__content {
  padding: 0;
}
::v-deep.van-sidebar {
  /* 隐藏滚动条*/
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
  line-height: 30px;
}
.cs{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   >div{
      width: calc((100% - 32px)/2);
      height: 80px;
      margin: 8px;
      position: relative;
      background-color: #acacaf;
      >img{
         width: 100%;
         height: 100%;
      }
      
      >div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        >span{
          font-size: 15px;
          color: #fff;
          font-weight: 600;
        }
        >p{
          font-size: 15px;
          color: #fff;
        }
        
      }
   }
}
.van-search__content{
   background-color: #f2f3f7;
}
.van-search{
   height: 50px;
}
</style>